<div>
  <div class="form-container">
    <form
      class="seb-form"
      [formGroup]="queryForm"
      #ngForm="ngForm"
      (ngSubmit)="queryForm.valid && searchProductsByCriteria()">
      <fieldset>
        <legend>QUESTIONNAIRE:</legend>
        <div class="form-group">
          <label><b>What age category do you belong to?</b> <br />
            <select formControlName="ageBracket">
              <option value="" disabled>Choose age category...</option>
              <option value="JUNIOR">Junior age (0-17)</option>
              <option value="ADULT">Adult age (18-64)</option>
              <option value="SENIOR">Senior age (65+)</option>
            </select>
          </label><br />
          <div *ngIf="ngForm.submitted && f.ageBracket.invalid"
               class="alert-danger">
            You need to choose the age category.
          </div>

          <label><b>What income category do you belong to?</b><br />
            <select formControlName="incomeBracket">
              <option value="" disabled>Choose income category...</option>
              <option value="NO_INCOME">No income (0)</option>
              <option value="LOW_INCOME">Low income (1-12000)</option>
              <option value="MEDIUM_INCOME">Medium income (12001-40000)</option>
              <option value="HIGH_INCOME">High income (40001+)</option>
            </select>
          </label><br />
          <div *ngIf="ngForm.submitted && f.incomeBracket.invalid"
               class="alert-danger">
            You need to choose the income category.
          </div>

          <label><b>Are you a student?</b><br />
            <label>
              <input
                type="radio"
                formControlName="student"
                name="student"
                value="true" />
              Yes</label>
            <label>
              <input
                type="radio"
                formControlName="student"
                name="student"
                value="false" />
              No</label>
          </label>
          <div *ngIf="ngForm.submitted && f.student.invalid"
               class="alert-danger">
            You should select either yes or no.
          </div>
        </div>

        <div class="form-group">
          <input type="submit"
                 value="Update Product Recommendations" />
        </div>
      </fieldset>
    </form>
  </div>

  <table
    class="product-table"
    *ngIf="products.length !== 0">
    <tr>
      <th>PRODUCT</th>
    </tr>
    <tr *ngFor="let product of products; let i = index">
      <td>{{product.productName}}</td>
    </tr>
  </table>
</div>
